<template>
  <div class="container">
    <div class="video-wrapper" v-if="!isSplitView">
      <!-- 单个大窗口 -->
      <video class="demo-video large" ref="playerLeft" preload="auto" muted autoplay
        @click="reloadVideo('left')"></video>
    </div>
    <div class="video-wrapper" v-else>
      <!-- 两个小窗口 -->
      <video class="demo-video small" ref="playerLeft" preload="auto" muted autoplay
        @click="reloadVideo('left')"></video>
      <video class="demo-video small" ref="playerRight" preload="auto" muted autoplay
        @click="reloadVideo('right')"></video>
    </div>
  </div>
  <!-- 添加控制按钮 -->
  <div class="controls">
    <el-button @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</el-button>
    <el-button @click="reloadBothVideos">重新加载</el-button>
    <el-button @click="background">背景替换</el-button>
    <el-button @click="yolo">目标检测</el-button>
  </div>
</template>

<script>
import flvjs from "flv.js";

export default {
  data() {
    return {
      idLeft: "1",
      idRight: "2",
      selectedRtspLeft: "rtsp://10.112.89.161:8554/inputcam",
      selectedRtspRight: "rtsp://10.112.89.161:8554/inputcam",
      playerLeft: null,
      playerRight: null,
      isPlaying: true,
      isSplitView: false, // 控制是否分屏
    };
  },
  mounted() {
    this.playVideo(this.selectedRtspLeft, 'left');
  },
  methods: {
    playVideo(rtsp, side) {
      this.$nextTick(() => { // 确保 DOM 更新完成
        if (flvjs.isSupported()) {
          let video = side === 'left' ? this.$refs.playerLeft : this.$refs.playerRight;
          if (!video) return; // 确保 video 元素存在
          let player = flvjs.createPlayer({
            type: "flv",
            isLive: true,
            url: `ws://10.112.241.175:2333/rtsp/${side === 'left' ? this.idLeft : this.idRight}/?url=${rtsp}`
          });
          player.attachMediaElement(video);
          try {
            player.load();
            player.play().catch(error => console.warn("Playback error:", error));
            if (side === 'left') this.playerLeft = player;
            else this.playerRight = player;
          } catch (error) {
            console.log(error);
          }
        }
      });
    },
    reloadVideo(side) {
      let player = side === 'left' ? this.playerLeft : this.playerRight;
      if (player) {
        player.destroy(); // 销毁播放器实例
        if (side === 'left') {
          this.playerLeft = null;
        } else {
          this.playerRight = null;
        }
      }

      // 重新加载视频
      if (side === 'left') {
        this.playVideo(this.selectedRtspLeft, 'left');
      } else if (this.isSplitView) {
        this.playVideo(this.selectedRtspRight, 'right');
      }
    },
    reloadBothVideos() {
      if (this.isSplitView) {
        // 先加载左边的视频
        this.reloadVideo('left');
        // 左边视频加载完成后，再加载右边的视频
        this.reloadVideo('right');
      } else {
        this.reloadVideo('left');
      }
    },
    togglePlay() {
      if (this.isPlaying) {
        this.$refs.playerLeft.pause();
        if (this.isSplitView) this.$refs.playerRight.pause();
      } else {
        this.$refs.playerLeft.play();
        if (this.isSplitView) this.$refs.playerRight.play();
      }
      this.isPlaying = !this.isPlaying;
    },
    background() {
      this.reloadBothVideos();
      this.selectedRtspLeft = "rtsp://10.112.89.161:8554/inputcam";
      this.selectedRtspRight = "rtsp://10.112.89.161:8554/outputcam";
      this.isSplitView = true; // 切换到分屏
      this.reloadBothVideos();
    },
    yolo() {
      this.reloadBothVideos();
      this.selectedRtspLeft = "rtsp://10.112.51.79:8554/frame";
      this.isSplitView = false; // 切换到分屏
      this.reloadBothVideos();
    }
  },
  beforeDestroy() {
    if (this.playerLeft) this.playerLeft.destroy();
    if (this.playerRight) this.playerRight.destroy();
  }
};
</script>

<style scoped>
.container {
  display: flex;
  align-items: center;
  height: 80%;
  overflow: hidden;
}

.video-wrapper {
  display: flex;
  width: 100%;
  max-width: 100%;
  gap: 10px;
}

.demo-video.large {
  width: 100%;
  /* 单窗口占满宽度 */
  height: 100%;
  object-fit: contain;
}

.demo-video.small {
  width: 100%;
  max-width: 50%;
  /* 每个小窗口占一半宽度 */
  height: 100%;
  gap: 10px;
  object-fit: contain;
}

.controls {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
